<template>
  <div class="search">
    <div class="container">
      <div class="receiving-detail">
        <div class="detail">
          <div class="detail-title">订单详情</div>
          <div class="detail-mesge">订单状态:未支付交易关闭</div>
          <div class="detail-mesge">订单所属账号:张三(13800138000)</div>
          <div class="detail-mesge">预选单:6453546736545634644</div>
        </div>
      </div>
      <div v-if="condition !=1" class="logistics">
        <div class="logistics-title">物流信息</div>
        <div class="logistics-top">
          <div class="logistics-left">
            <i class="iconfont icon-vehicle vehicle" />
            <div class="detail">
              <div>配送完成</div>
              <div class="time">2020-03-05 11:11:11</div>
            </div>
          </div>
          <div class="logistics-btn" @click="transport">车辆运输详情</div>
        </div>
        <div class="logistics-botton">
          <i class="iconfont icon-site vehicle" />
          <div class="personal-detail">
            <div>李翠花 13380013800</div>
            <div>广东省广州市天河区棠下村1234</div>
          </div>
        </div>
      </div>
      <div class="order-detail">
        <div class="order-title">订单发票信息</div>
        <div class="order-messg">
          <div class="line-height">
            <div>是否开发票：是</div>
            <div>发票抬头：深圳阿奇数科技有限公司</div>
          </div>
          <div class="line-height">
            <div>发票类型：纸质发票</div>
            <div>纳税人识别号：G99440303300000000S</div>
          </div>
          <div>发票内容：商品分类</div>
        </div>
      </div>
      <div class="information">
        <div class="information-title">订单信息</div>
        <div class="information-detail">
          <div>
            <span>交易快照：</span>发送交易争议时，可作为判断依据
          </div>
          <div class="numbering">
            <span>订单编号：</span>
            <span>{{ NetbarNumber }}</span>
            <button class="copy-btn" @click="copy">复制</button>
          </div>
          <div>
            <span>买家留言：</span>请尽快发货，晚上11点不在家
          </div>
          <div class="information-time">
            <div>
              <span>下单时间：</span>2019-01-03 15:39:02
            </div>
            <div>
              <span>付款时间：</span>2019-01-03 15:39:02
            </div>
            <div>
              <span>支付方式：</span>支付宝
            </div>
          </div>
          <div class="time">
            <div>
              <span>发货时间：</span>2019-01-03 15:39:02
            </div>
            <div v-if="condition == 4">
              <span>成交时间：</span>2019-01-03 15:39:02
            </div>
          </div>
        </div>
      </div>
      <div class="product-message">
        <div class="product-title">
          <div>商品信息</div>
          <div class="number">
            <span>单价（元）</span>
            <span>数量</span>
            <span>订单状态</span>
            <span>操作</span>
          </div>
        </div>
        <div class="product-list">
          <div class="product-panel">
            <i class="iconfont icon-shop shop" />
            <div>仪器仪表专卖</div>
          </div>
          <ul>
            <li class="list">
              <div class="list-left">
                <div class="list-img" />
                <div class="list-detail">
                  <div class="list-name">钢管</div>
                  <ul>
                    <li>标 号：外16内6.03</li>
                    <li>标 号：外16内6.03</li>
                    <li>标 号：外16内6.03</li>
                  </ul>
                </div>
              </div>
              <div class="list-right">
                <span>58.00</span>
                <span class="num">2</span>
                <span class="deal">关闭交易</span>
                <span class="list-number">售后申请</span>
              </div>
            </li>
            <li class="list">
              <div class="list-left">
                <div class="list-img" />
                <div class="list-detail">
                  <div class="list-name">钢管</div>
                  <ul>
                    <li>标 号：外16内6.03</li>
                    <li>标 号：外16内6.03</li>
                    <li>标 号：外16内6.03</li>
                  </ul>
                </div>
              </div>
              <div class="list-right">
                <span>58.00</span>
                <span class="num">2</span>
                <span class="deal">关闭交易</span>
                <span class="list-number">售后申请</span>
              </div>
            </li>
          </ul>
        </div>
        <div class="product-buttom">
          <div>
            <span>2件商品，总商品金额：￥116.00</span>
            <span>运输里程：200.00km</span>
            <span>
              运费总价：
              <span class="size-color" @click="toFreight">￥20.00></span>
            </span>
          </div>
          <div>店铺合计：￥116.00</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      input: '',
      num1: 1,
      condition: '',
      NetbarNumber: 'OR1546501141927903'
    }
  },
  created() {
    this.detail()
  },
  methods: {
    handleChange(value) {
      console.log(value)
    },
    detail() {
      this.condition = this.$route.query.state
    },
    copy() {
      const input = document.createElement('input')
      document.body.appendChild(input)
      input.setAttribute('value', this.NetbarNumber)
      input.select()
      if (document.execCommand('copy')) {
        document.execCommand('copy')
        this.$message({
          showClose: true,
          message: '复制成功',
          type: 'success'
        })
      }
      document.body.removeChild(input)
    },
    transport() {
      this.$router.push({
        path: '/carriage-detail'
      })
    },
    toFreight() {
      this.$router.push({
        path: '/prepaid'
      })
    }
  }
}
</script>

<style lang='scss' scoped >
.search {
  background: #f5f5f5;
  .container {
    .receiving-detail {
      background: #ffffff;
      height: 154px;
      margin-top: 30px;
      padding: 20px;
      display: flex;
      justify-content: space-between;
      .detail {
        color: #6b6b6b;
        font-size: 14px;
        line-height: 28px;
        .detail-title {
          color: #3d3d3d;
          font-size: 16px;
          font-weight: bold;
        }
      }
      .button {
        display: flex;
        align-items: center;
        .goods {
          width: 110px;
          height: 38px;
          text-align: center;
          line-height: 38px;
          background: #ffdbd8;
          border: 1px solid #ff3b30;
          color: #ff3b30;
          border-radius: 3px;
          cursor: pointer;
        }
        .record {
          width: 110px;
          height: 38px;
          text-align: center;
          line-height: 38px;
          background: #ff3b30;
          color: #ffffff;
          border-radius: 3px;
          margin-left: 10px;
          cursor: pointer;
        }
      }
    }
    .logistics {
      margin-top: 20px;
      padding: 20px;
      height: 186px;
      background: #ffffff;
      margin-bottom: 20px;
      .vehicle{
        width: 23px;
        height: 23px;
        font-size: 20px;
        margin-right: 8px;
      }
      .logistics-title {
        color: #3d3d3d;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 6px;
      }
      .logistics-top {
        display: flex;
        justify-content: space-between;
        padding-bottom: 18px;
        border-bottom: 1px solid #e5e5e5;
        .logistics-left {
          display: flex;
          align-items: center;

          .icon {
            width: 23px;
            height: 23px;
            background: darkcyan;
            margin-right: 10px;
          }
          .detail {
            color: #3d3d3d;
            font-size: 14px;
            .time {
              color: #8e8e93;
              font-size: 12px;
            }
          }
        }
        .logistics-btn {
          background: #ff3b30;
          font-size: 16px;
          width: 124px;
          height: 38px;
          text-align: center;
          line-height: 38px;
          color: #ffffff;
          border-radius: 3px;
          cursor: pointer;
        }
      }
      .logistics-botton {
        display: flex;
        align-items: center;
        margin-top: 18px;
        .icon {
          width: 23px;
          height: 23px;
          background: darkcyan;
          margin-right: 10px;
        }
      }
    }
    .order-detail {
      height: 120px;
      background: #ffffff;
      padding: 20px;
      // margin-bottom: 20px;
      margin: 20px 0;
      .order-title {
        color: #3d3d3d;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .order-messg {
        display: flex;
        justify-content: space-between;
        width: 900px;
        .line-height {
          line-height: 22px;
        }
      }
    }
    .information {
      padding: 20px;
      background: #ffffff;
      height: 224px;
      margin-bottom: 20px;
      .information-title {
        color: #3d3d3d;
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
      }
      .information-detail {
        line-height: 30px;
        .numbering {
          display: flex;
          align-items: center;
          .copy-btn {
            width: 33px;
            height: 16px;
            color: #6b6b6b;
            font-size: 10px;
            border: 1px solid #8e8e93;
            text-align: center;
            line-height: 14px;
            margin-left: 10px;
            border-radius: 2px;
            cursor: pointer;
          }
        }
        .information-time {
          display: flex;
          justify-content: space-between;
          width: 900px;
        }
        .time {
          display: flex;
          width: 602px;
          justify-content: space-between;
        }
      }
      span {
        color: #6b6b6b;
      }
    }
    .product-message {
      margin-bottom: 60px;
      .product-title {
        height: 53px;
        background: #ffffff;
        padding-left: 20px;
        padding-right: 65px;
        display: flex;
        justify-content: space-between;
        line-height: 53px;
        font-size: 14px;
        color: #3d3d3d;
        border-bottom: 1px solid #e5e5e5;
        .number {
          display: flex;
          width: 500px;
          justify-content: space-between;
        }
      }
      .product-list {
        background: #ffffff;
        padding: 20px 0 20px 20px;
        .product-panel {
          display: flex;
          align-items: center;
          .product-icon {
            width: 23px;
            height: 23px;
            background: salmon;
            margin-right: 10px;
          }
          .shop{
            font-size: 16px;
            margin-right: 8px;
          }
        }
        .list {
          display: flex;
          justify-content: space-between;
          margin-top: 18px;
          align-items: center;
          .list-left {
            display: flex;
            .list-img {
              width: 83px;
              height: 83px;
              background: aqua;
              margin-right: 30px;
            }
            .list-name {
              color: #3d3d3d;
              font-size: 14px;
            }
          }
          .list-right {
            display: flex;
            width: 500px;
            justify-content: space-between;
            margin-right: 46px;
            .list-number {
              // margin: 0 84px 0 140px;
              color: #02a9f1;
            }
            .num {
              margin-left: 15px;
            }
            .deal {
              margin-right: -19px;
            }
          }
        }
      }
      .product-buttom {
        height: 89px;
        background: #ffffff;
        padding: 18px 20px 18px 0;
        border-top: 3px solid #e5e5e5;
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        justify-content: space-between;
        .size-color {
          color: #02a9f1;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
